:root {
    /* 标准色 */
      --red: #e54d42;
      --orange: #f37b1d;
      --yellow: #fbbd08;
      --olive: #8dc63f;
      --green: #39b54a;
      --cyan: #1cbbb4;
      --blue: #0081ff;
      --purple: #6739b6;
      --mauve: #9c26b0;
      --pink: #e03997;
      --brown: #a5673f;
      --grey: #8799a3;
      --black: #333333;
      --darkGray: #666666;
      --gray: #aaaaaa;
      --ghostWhite: #f1f1f1;
      --white: #ffffff;
      --link: #4a79a0;
      /* 浅色 */
      --redLight: #fadbd9;
      --orangeLight: #fde6d2;
      --yellowLight: #fef2ce;
      --oliveLight: #e8f4d9;
      --greenLight: #d7f0db;
      --cyanLight: #d2f1f0;
      --blueLight: #cce6ff;
      --purpleLight: #e1d7f0;
      --mauveLight: #ebd4ef;
      --pinkLight: #f9d7ea;
      --brownLight: #ede1d9;
      --greyLight: #e7ebed;
      /* 渐变色 */
      --gradualRed: linear-gradient(45deg, #f43f3b, #ec008c);
      --gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24);
      --gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f);
      --gradualPurple: linear-gradient(45deg, #9000ff, #5e00ff);
      --gradualPink: linear-gradient(45deg, #ec008c, #6739b6);
      --gradualBlue: linear-gradient(45deg, #0081ff, #1cbbb4);
      /* 阴影透明色 */
      --ShadowSize: 3px 3px 4px;
      --redShadow: rgba(204, 69, 59, 0.2);
      --orangeShadow: rgba(217, 109, 26, 0.2);
      --yellowShadow: rgba(224, 170, 7, 0.2);
      --oliveShadow: rgba(124, 173, 55, 0.2);
      --greenShadow: rgba(48, 156, 63, 0.2);
      --cyanShadow: rgba(28, 187, 180, 0.2);
      --blueShadow: rgba(0, 102, 204, 0.2);
      --purpleShadow: rgba(88, 48, 156, 0.2);
      --mauveShadow: rgba(133, 33, 150, 0.2);
      --pinkShadow: rgba(199, 50, 134, 0.2);
      --brownShadow: rgba(140, 88, 53, 0.2);
      --greyShadow: rgba(114, 130, 138, 0.2);
      --grayShadow: rgba(114, 130, 138, 0.2);
    --blackShadow: rgba(26, 26, 26, 0.2);
  
    --borderGray: rgba(0, 0, 0, 0.05);
    
    /* 标准字号 */
    --textNormal: 14px;
    --textSm: 12px;
    --textXs: 10px;
    --textXxs: 8px;
    --textLg: 16px;
    --textXl: 19px;
    --textXxl: 23px;
  
    /* 标准间距 */
    --space: 15px;
    --spaceSm: 10px;
    --spaceXs: 5px;
    --spaceXxs: 2px;
    --spaceMd: 20px;
    --spaceLg: 30px;
    --spaceXl: 50px;
    --spaceXxl: 100px;
  
      font-size: var(--textNormal);
      color: var(--black);
    font-family:-apple-system-font,Helvetica Neue,sans-serif;
    line-height: 1.6;
    height: 100%;
  }
  
  button {
      color: #555;
  }
  
  /*================== 文字效果 ==================== */
  .text-md {  font-size: var(--textNormal) !important;}
  .text-sm {  font-size: var(--textSm) !important; }
  .text-xs {  font-size: var(--textXs) !important; }
  .text-xxs {  font-size: var(--textXxs) !important; }
  .text-lg {  font-size: var(--textLg) !important; }
  .text-xl {  font-size: var(--textXl) !important; }
  .text-xxl {  font-size: var(--textXxl) !important; }
  .text-sl { font-size: 40px !important; }
  .text-xsl {	font-size: 60px !important; }
  
  .text-Abc {	text-transform: Capitalize !important;}
  .text-ABC {	text-transform: Uppercase !important; }
  .text-abc {	text-transform: Lowercase !important;}
  
  .text-price::before {	content: "¥";	font-size: 80%;	margin-right: 3px;}
  
  .text-ellipsis { text-overflow: ellipsis;	white-space:initial; display: -webkit-box; -webkit-box-orient: vertical;  overflow: hidden; -webkit-line-clamp: 1;}
  .text-ellipsis.line-2 { -webkit-line-clamp: 2; }
  .text-ellipsis.line-3 { -webkit-line-clamp: 3; }
  .text-ellipsis.line-4 { -webkit-line-clamp: 4; }
  
  
  .text-bold { font-weight: bold !important;}
  .text-bolder { font-weight: bolder !important;}
  .text-lighter {font-weight: lighter !important;}
  
  .text-center { text-align: center !important; }
  .text-left { text-align: left !important; }
  .text-right {	text-align: right !important; }
  
  .text-red {	color: var(--red) !important; }
  .text-orange { color: var(--orange) !important; }
  .text-yellow { color: var(--yellow) !important; }
  .text-olive {	color: var(--olive) !important; }
  .text-green {	color: var(--green) !important; }
  .text-cyan { color: var(--cyan) !important; }
  .text-blue {color: var(--blue) !important;}
  .text-purple { color: var(--purple) !important; }
  .text-mauve {	color: var(--mauve) !important; }
  .text-pink { color: var(--pink) !important; }
  .text-brown { color: var(--brown) !important; }
  .text-grey { color: var(--grey) !important; }
  .text-gray { color: var(--gray) !important; }
  .text-black {	color: var(--black) !important; }
  .text-white {	color: var(--white) !important; }
  .text-link {	color: var(--link) !important; margin-left: 2px; margin-right: 2px;}
  
  /*================== 宽 和 高 ==================== */
   .w-full { width: 100%; }
   .h-full { height: 100%; }
  
  /*================== Border ==================== */
  .b { border: 1px solid var(--borderGray) !important; }
  .b-n {border-width: 0 !important; border-color: transparent !important;}
  .b-t { border-top: 1px solid var(--borderGray) !important; }
  .b-l { border-left: 1px solid var(--borderGray) !important; }
  .b-r { border-right: 1px solid var(--borderGray) !important; }
  .b-b { border-bottom: 1px solid var(--borderGray) !important; }
  .b-tb { border-top: 1px solid var(--borderGray) !important; border-bottom: 1px solid var(--borderGray) !important;}
  .b-lr { border-left: 1px solid var(--borderGray) !important; border-right: 1px solid var(--borderGray) !important; }
  .b-t-n {border-top-width: 0 !important; border-top-color: transparent !important;}
  .b-r-n {border-right-width: 0 !important; border-right-color: transparent !important;}
  .b-b-n {border-bottom-width: 0 !important; border-bottom-color: transparent !important;}
  .b-l-n {border-left-width: 0 !important; border-left-color: transparent !important;}
  
  .b-red {border-color: var(--red);}
  .b-red {	border-color: var(--red); }
  .b-orange { border-color: var(--orange); }
  .b-yellow { border-color: var(--yellow); }
  .b-olive {	border-color: var(--olive); }
  .b-green {	border-color: var(--green); }
  .b-cyan { border-color: var(--cyan); }
  .b-blue {border-color: var(--blue);}
  .b-purple { border-color: var(--purple); }
  .b-mauve {	border-color: var(--mauve); }
  .b-pink { border-color: var(--pink); }
  .b-brown { border-color: var(--brown); }
  .b-grey { border-color: var(--grey); }
  .b-gray { border-color: var(--gray); }
  .b-black {	border-color: var(--black); }
  .b-white {	border-color: var(--white); }
  
  .r { border-radius: 4px !important;}
  .r-0 {border-radius: 0 !important;}
  .r-2x { border-radius: 5px !important;}
  .r-3x {  border-radius: 8px !important; }
  .circle { border-radius: 50% !important;}
  .r-l {  border-radius: 4px 0 0 4px !important; }
  .r-r {  border-radius: 0 4px 4px 0 !important; }
  .r-t {  border-radius: 4px 4px 0 0 !important; }
  .r-b {  border-radius: 0 0 4px 4px !important; }
  
  /*================== Margin ==================== */
  .m { margin: var(--space) !important;}
  .m-n {margin: 0 !important;}
  .m-sm { margin: var(--spaceSm) !important;}
  .m-xs { margin: var(--spaceXs) !important;}
  .m-xxs { margin: var(--spaceXxs) !important;}
  .m-md { margin: var(--spaceMd) !important;}
  .m-lg { margin: var(--spaceLg) !important;}
  .m-xl { margin: var(--spaceXl) !important;}
  .m-xxl { margin: var(--spaceXxl) !important;}
  
  .m-t { margin-top: var(--space) !important;}
  .m-r { margin-right: var(--space) !important;}
  .m-b { margin-bottom: var(--space) !important;}
  .m-l { margin-left: var(--space) !important;}
  
  .m-t-sm { margin-top: var(--spaceSm) !important;}
  .m-r-sm { margin-right: var(--spaceSm) !important;}
  .m-b-sm { margin-bottom: var(--spaceSm) !important;}
  .m-l-sm { margin-left: var(--spaceSm) !important;}
  
  .m-t-xs { margin-top: var(--spaceXs) !important;}
  .m-r-xs { margin-right: var(--spaceXs) !important;}
  .m-b-xs { margin-bottom: var(--spaceXs) !important;}
  .m-l-xs { margin-left: var(--spaceXs) !important;}
  
  .m-t-xxs { margin-top: var(--spaceXxs) !important;}
  .m-r-xxs { margin-right: var(--spaceXxs) !important;}
  .m-b-xxs { margin-bottom: var(--spaceXxs) !important;}
  .m-l-xxs { margin-left: var(--spaceXxs) !important;}
  
  .m-t-md { margin-top: var(--spaceMd) !important;}
  .m-r-md { margin-right: var(--spaceMd) !important;}
  .m-b-md { margin-bottom: var(--spaceMd) !important;}
  .m-l-md { margin-left: var(--spaceMd) !important;}
  
  .m-t-lg { margin-top: var(--spaceLg) !important;}
  .m-r-lg { margin-right: var(--spaceLg) !important;}
  .m-b-lg { margin-bottom: var(--spaceLg) !important;}
  .m-l-lg { margin-left: var(--spaceLg) !important;}
  
  .m-t-xl { margin-top: var(--spaceXl) !important;}
  .m-r-xl { margin-right: var(--spaceXl) !important;}
  .m-b-xl { margin-bottom: var(--spaceXl) !important;}
  .m-l-xl { margin-left: var(--spaceXl) !important;}
  
  .m-t-xxl { margin-top: var(--spaceXxl) !important;}
  .m-r-xxl { margin-right: var(--spaceXxl) !important;}
  .m-b-xxl { margin-bottom: var(--spaceXxl) !important;}
  .m-l-xxl { margin-left: var(--spaceXxl) !important;}
  
  .m-tb { margin-top: var(--space) !important; margin-bottom: var(--space) !important;}
  .m-tb-sm { margin-top: var(--spaceSm) !important; margin-bottom: var(--spaceSm) !important;}
  .m-tb-xs { margin-top: var(--spaceXs) !important; margin-bottom: var(--spaceXs) !important;}
  .m-tb-xxs { margin-top: var(--spaceXxs) !important; margin-bottom: var(--spaceXxs) !important;}
  .m-tb-md { margin-top: var(--spaceMd) !important; margin-bottom: var(--spaceMd) !important;}
  .m-tb-lg { margin-top: var(--spaceLg) !important; margin-bottom: var(--spaceLg) !important;}
  .m-tb-xl { margin-top: var(--spaceXl) !important; margin-bottom: var(--spaceXl) !important;}
  .m-tb-xxl { margin-top: var(--spaceXxl) !important; margin-bottom: var(--spaceXxl) !important;}
  
  .m-lr { margin-left: var(--space) !important; margin-right: var(--space) !important;}
  .m-lr-sm { margin-left: var(--spaceSm) !important; margin-right: var(--spaceSm) !important;}
  .m-lr-xs { margin-left: var(--spaceXs) !important; margin-right: var(--spaceXs) !important;}
  .m-lr-xxs { margin-left: var(--spaceXxs) !important; margin-right: var(--spaceXxs) !important;}
  .m-lr-md { margin-left: var(--spaceMd) !important; margin-right: var(--spaceMd) !important;}
  .m-lr-lg { margin-left: var(--spaceLg) !important; margin-right: var(--spaceLg) !important;}
  .m-lr-xl { margin-left: var(--spaceXl) !important; margin-right: var(--spaceXl) !important;}
  .m-lr-xxl { margin-left: var(--spaceXxl) !important; margin-right: var(--spaceXxl) !important;}
  
  /*================== Padding ==================== */
  .p { padding: var(--space) !important;}
  .p-n {padding: 0 !important;}
  .p-sm { padding: var(--spaceSm) !important;}
  .p-xs { padding: var(--spaceXs) !important;}
  .p-xxs { padding: var(--spaceXxs) !important;}
  .p-md { padding: var(--spaceMd) !important;}
  .p-lg { padding: var(--spaceLg) !important;}
  .p-xl { padding: var(--spaceXl) !important;}
  .p-xxl { padding: var(--spaceXxl) !important;}
  
  .p-t { padding-top: var(--space) !important;}
  .p-r { padding-right: var(--space) !important;}
  .p-b { padding-bottom: var(--space) !important;}
  .p-l { padding-left: var(--space) !important;}
  
  .p-t-sm { padding-top: var(--spaceSm) !important;}
  .p-r-sm { padding-right: var(--spaceSm) !important;}
  .p-b-sm { padding-bottom: var(--spaceSm) !important;}
  .p-l-sm { padding-left: var(--spaceSm) !important;}
  
  .p-t-xs { padding-top: var(--spaceXs) !important;}
  .p-r-xs { padding-right: var(--spaceXs) !important;}
  .p-b-xs { padding-bottom: var(--spaceXs) !important;}
  .p-l-xs { padding-left: var(--spaceXs) !important;}
  
  .p-t-xxs { padding-top: var(--spaceXxs) !important;}
  .p-r-xxs { padding-right: var(--spaceXxs) !important;}
  .p-b-xxs { padding-bottom: var(--spaceXxs) !important;}
  .p-l-xxs { padding-left: var(--spaceXxs) !important;}
  
  .p-t-md { padding-top: var(--spaceMd) !important;}
  .p-r-md { padding-right: var(--spaceMd) !important;}
  .p-b-md { padding-bottom: var(--spaceMd) !important;}
  .p-l-md { padding-left: var(--spaceMd) !important;}
  
  .p-t-lg { padding-top: var(--spaceLg) !important;}
  .p-r-lg { padding-right: var(--spaceLg) !important;}
  .p-b-lg { padding-bottom: var(--spaceLg) !important;}
  .p-l-lg { padding-left: var(--spaceLg) !important;}
  
  .p-t-xl { padding-top: var(--spaceXl) !important;}
  .p-r-xl { padding-right: var(--spaceXl) !important;}
  .p-b-xl { padding-bottom: var(--spaceXl) !important;}
  .p-l-xl { padding-left: var(--spaceXl) !important;}
  
  .p-t-xxl { padding-top: var(--spaceXxl) !important;}
  .p-r-xxl { padding-right: var(--spaceXxl) !important;}
  .p-b-xxl { padding-bottom: var(--spaceXxl) !important;}
  .p-l-xxl { padding-left: var(--spaceXxl) !important;}
  
  .p-tb { padding-top: var(--space) !important; padding-bottom: var(--space) !important;}
  .p-tb-sm { padding-top: var(--spaceSm) !important; padding-bottom: var(--spaceSm) !important;}
  .p-tb-xs { padding-top: var(--spaceXs) !important; padding-bottom: var(--spaceXs) !important;}
  .p-tb-xxs { padding-top: var(--spaceXxs) !important; padding-bottom: var(--spaceXxs) !important;}
  .p-tb-md { padding-top: var(--spaceMd) !important; padding-bottom: var(--spaceMd) !important;}
  .p-tb-lg { padding-top: var(--spaceLg) !important; padding-bottom: var(--spaceLg) !important;}
  .p-tb-xl { padding-top: var(--spaceXl) !important; padding-bottom: var(--spaceXl) !important;}
  .p-tb-xxl { padding-top: var(--spaceXxl) !important; padding-bottom: var(--spaceXxl) !important;}
  
  .p-lr { padding-left: var(--space) !important; padding-right: var(--space) !important;}
  .p-lr-sm { padding-left: var(--spaceSm) !important; padding-right: var(--spaceSm) !important;}
  .p-lr-xs { padding-left: var(--spaceXs) !important; padding-right: var(--spaceXs) !important;}
  .p-lr-xxs { padding-left: var(--spaceXxs) !important; padding-right: var(--spaceXxs) !important;}
  .p-lr-lg { padding-left: var(--spaceLg) !important; padding-right: var(--spaceLg) !important;}
  .p-lr-md { padding-left: var(--spaceMd) !important; padding-right: var(--spaceMd) !important;}
  .p-lr-xl { padding-left: var(--spaceXl) !important; padding-right: var(--spaceXl) !important;}
  .p-lr-xxl { padding-left: var(--spaceXxl) !important; padding-right: var(--spaceXxl) !important;}
  
  /*================== Flex ==================== */
  .flex { display: flex; align-items: center;}
  .flex-wrap {flex-wrap: wrap;}
  .flex-column {display: flex; align-items: center; flex-direction: column;}
  .flex.column { flex-direction: column;}
  .flex.align-start, .flex-align-start {align-items: flex-start !important;}
  .flex.align-center, .flex-align-center {align-items: center !important;}
  .flex.align-end, .flex-align-end {align-items: flex-end !important;}
  .flex.align-stretch, .flex-align-stretch { align-items: stretch !important; }
  .flex.space-around, .flex-space-around {justify-content: space-around !important;}
  .flex.justify, .flex-justify {justify-content: space-between !important;}
  .flex.start, .flex-start {justify-content: flex-start !important;}
  .flex.center, .flex-center {justify-content: center !important;}
  .flex.end, .flex-end {justify-content: flex-end !important;}
  
  .flex-sub { flex: 1; }
  .flex-twice { flex: 2; }
  .flex-treble { flex: 3; }
  
  .self-start {align-self: flex-start !important; }
  .self-center {align-self: center !important; }
  .self-end {align-self: flex-end !important; }
  
  /*================== 背景效果 ==================== */
  .bg-red {	background-color: var(--red);	color: var(--white);}
  .bg-orange {	background-color: var(--orange);	color: var(--white);}
  .bg-yellow {	background-color: var(--yellow);	color: var(--black);}
  .bg-olive {	background-color: var(--olive);	color: var(--white);}
  .bg-green {	background-color: var(--green);	color: var(--white);}
  .bg-cyan {	background-color: var(--cyan);	color: var(--white);}
  .bg-blue {	background-color: var(--blue);	color: var(--white);}
  .bg-purple {	background-color: var(--purple);	color: var(--white);}
  .bg-mauve {	background-color: var(--mauve);	color: var(--white);}
  .bg-pink {	background-color: var(--pink);	color: var(--white);}
  .bg-brown {	background-color: var(--brown);	color: var(--white);}
  .bg-grey {	background-color: var(--grey);	color: var(--white);}
  .bg-gray {	background-color: #f0f0f0;	color: var(--darkGray);}
  .bg-black {	background-color: var(--black);	color: var(--white);}
  .bg-white {	background-color: var(--white);	color: var(--darkGray);}
  .bg-shadeTop {	background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));	color: var(--white);}
  .bg-shadeBottom {	background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));	color: var(--white);}
  .bg-red.light {	color: var(--red);	background-color: var(--redLight);}
  .bg-orange.light {	color: var(--orange);	background-color: var(--orangeLight);}
  .bg-yellow.light {	color: var(--yellow);	background-color: var(--yellowLight);}
  .bg-olive.light {	color: var(--olive);	background-color: var(--oliveLight);}
  .bg-green.light {	color: var(--green);	background-color: var(--greenLight);}
  .bg-cyan.light {	color: var(--cyan);	background-color: var(--cyanLight);}
  .bg-blue.light {	color: var(--blue);	background-color: var(--blueLight);}
  .bg-purple.light {	color: var(--purple);	background-color: var(--purpleLight);}
  .bg-mauve.light {	color: var(--mauve);	background-color: var(--mauveLight);}
  .bg-pink.light {	color: var(--pink);	background-color: var(--pinkLight);}
  .bg-brown.light {	color: var(--brown);	background-color: var(--brownLight);}
  .bg-grey.light {	color: var(--grey);	background-color: var(--greyLight);}
  .bg-gradual-red {	background-image: var(--gradualRed);	color: var(--white);}
  .bg-gradual-orange {	background-image: var(--gradualOrange);	color: var(--white);}
  .bg-gradual-green {	background-image: var(--gradualGreen);	color: var(--white);}
  .bg-gradual-purple {	background-image: var(--gradualPurple);	color: var(--white);}
  .bg-gradual-pink {	background-image: var(--gradualPink);	color: var(--white);}
  .bg-gradual-blue {	background-image: var(--gradualBlue);	color: var(--white);}
  
  .bg-hover {background-color: #f0f0f0 !important;}
  .bd-hover {box-shadow: var(--ShadowSize) var(--yellowShadow) !important;}
  /*================== 阴影效果 ==================== */
  .shadow {box-shadow: var(--ShadowSize) var(--blackShadow);}
  .shadow-lg {	--ShadowSize: 0px 20px 50px 0px; }
  .shadow-warp {	position: relative;	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);}
  .shadow-warp:before,.shadow-warp:after {
      position: absolute;
      content: "";
      top: 10px;
      bottom: 15px;
      left: 10px;
      width: 50%;
      box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
      transform: rotate(-3deg);
      z-index: -1;
  }
  .shadow-warp:after {
      right: 10px;
      left: auto;
      transform: rotate(3deg);
  }
  